<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-02-16 16:53:19
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-14 10:02:05
 * @FilePath: \B2B\ebuy\src\components\SupplierBar\DropDown\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
  <div id="dropDown">
    <el-dropdown>
      <div class="content">
        <span class="el-dropdown-link">
          产品供应
          <i class="el-icon-arrow-up el-icon--right"></i>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="product,id in products" :key="id" @click.native="toProduct(product)">{{product.product_name}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>


<script>
export default {
  name:"dropDown",
  data() {
    return {
      products: []
    }
  },
  computed:{
      sid() {
          return this.$store.state.supplier.supplier_id
      }
  },
  watch: {
      sid: {
          immediate: true,
          handler: async function(newVal, oldVal) {
              if (newVal) {
                  let pictures = []
                  await this.$API.getSupply().then(res => {
                    if (res.status == 200) {
                        for (let obj of res.data) {
                            if (obj.supplier_id == newVal) {
                                this.products.push(obj)
                            }
                        }
                    }
                  })
              }
          }
      }
  },
  methods: {
    toProduct(product) {
      this.$router.push({
          path: '/supplier/product',
          query: {
              pid: product.id
          }
      })
    },
  }
}
</script>

<style lang="less" scoped>
#dropDown{
  .content{
    .el-dropdown-link {
      cursor: default;
      font-size: 20px;
      color: black;
      .el-icon-arrow-up{
        display: none;
      }
      .el-icon-arrow-down {
        font-size: 20px;
      }
    }
  }
  .content:hover{
    .el-icon-arrow-down{
      display: none;
    }
    .el-icon-arrow-up{
      display: inline-block;
    }
  } 
}
</style>